<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Router</title>
  <link href="index.css" rel="stylesheet">
</head>
<body>
  <div id="demo">
    <nav>
      <a :class="{ active: page === 'home'}" @click="page = 'home'">Home</a>
      <a :class="{ active: page === 'about'}" @click="page = 'about'">About</a>
      <select v-model="transitionName">
        <option value=""></option>
        <option value="fade">fade</option>
        <option value="fadeUp">fadeUp</option>
        <option value="fadeRight">fadeRight</option>
        <option value="fadeDown">fadeDown</option>
        <option value="fadeLeft">fadeLeft</option>
        <option value="slide">slide</option>
        <option value="page">page</option>
        <option value="zoom">zoom</option>
      </select>
    </nav>

    <transition :name="transitionName" mode="out-in">
      <div v-if="page === 'home'">Home Page</div>
      <div v-else>About Page</div>
    </transition>
  </div>
  <script src="https://unpkg.com/vue@3"></script>
  <script src="https://unpkg.com/vue-router@4"></script>
  <script>
    Vue.createApp({
      data() {
        return {
          transitionName: 'fade',
          page: 'home',
        }
      },
    }).mount('#demo')
  </script>
</body>
</html>
